<!DOCTYPE html>
<html>
  <head>
    <title>TCG Card GeoLocation Viewer</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    
    <script type="text/javascript">
      var map;
      

      function initialize() {
        var myOptions = {
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: 'Location found using <b>HTML5.</b>'
            });

            map.setCenter(pos);
            
         	// Make a request to server in order to get the freebies
         	//alert(position.coords.latitude + ", " + position.coords.longitude);
            getFreebies(position.coords.latitude, position.coords.longitude, 50.0);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }

      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
          map: map,
          position: new google.maps.LatLng(51.450078953763246, 7.032870054244995),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }
      
      function getFreebies(lat, lon, radius) {
    	  var xmlHttp = null;
    	  try {
    	      // Mozilla, Opera, Safari sowie Internet Explorer (ab v7)
    	      xmlHttp = new XMLHttpRequest();
    	  } catch(e) {
    	      try {
    	          // MS Internet Explorer (ab v6)
    	          xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    	      } catch(e) {
    	          try {
    	              // MS Internet Explorer (ab v5)
    	              xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
    	          } catch(e) {
    	              xmlHttp  = null;
    	          }
    	      }
    	  }
    	  
    	  if (xmlHttp) {
    	      xmlHttp.open('GET', 'card/freebies/' + lat + '/' + lon + '/' + radius, true);
    	      xmlHttp.onreadystatechange = function () {
    	          if (xmlHttp.readyState == 4) {
    	              //alert(xmlHttp.responseText);
    	              var response = eval('(' + xmlHttp.responseText + ')');
    	              
    	              console.log("response.d has " + response.d.length + " elements.");
    	              
    	              for each (var ci in response.d) {
    	            	  var marker = new google.maps.Marker({
	   	            	      	map:map,
	   	            	      	draggable:true,
	   	            	      	position: new google.maps.LatLng(ci.lat, ci.lon),
    	            	  		title: ci.lat + ", " + ci.lon
 	            	      });
    	            	  
    	            	  marker.set('ci', ci);    	            	      	            	  
    	            	  
    	            	  google.maps.event.addListener(marker, 'click', function() {
    	            	      showInfoWindow(this);
    	            	    });
    	              }
    	          }
    	      };
    	      xmlHttp.send(null);
    	  }
      }
      
      function showInfoWindow(marker) {
    	  var ci = marker.get('ci');
    	  
    	  $.get('card/' + ci.card, function(data) {
    		  var card = data.d;
    		  
    		  var infowindow = new google.maps.InfoWindow({
	     		  	maxWidth: 400,
	     	        content: "<img src=\"card/" + ci.card + "/image\"></img><br><b>" + card.name + "</b><br>Life: " + card.l
	     	        			+ "<br>Attack: " + card.at
	     	        			+ "<br>Defense: " + card.d
	     	        			+ "<br>Agility: " + card.ag
	     	    });
	     	  infowindow.open(map,marker);
   		  });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    
    
  </head>
  <body>
    <div id="map_canvas"></div>
    
    <script src="assets/js/lib/jquery/jquery-1.7.1.min.js"></script>
  </body>
</html>
